<template>
  <li v-show="data">
    <div class="list">
      <div class="label" v-if="data.isHotSale == 1">
        <img src="../assets/img/section_hot.png" alt="" />
      </div>
      <div class="label" v-if="data.isLatest == 1">
        <img src="../assets/img/section_new.png" alt="" />
      </div>
      <div class="pic">
        <img
          :src="`http://sc.wolfcode.cn` + data.coverImg"
          alt=""
          width="285px"
        />
      </div>
      <div class="detail">
        <p class="tex">{{ data.name }}</p>
        <p style="color: red">{{ data.coin }}积分</p>
        <button>立即兑换</button>
      </div>
    </div>
  </li>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {},
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  margin-top: 10px;
  text-align: center;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  transition: 0.5s;

  &:hover {
    transform: translateY(-20px);
  }

  .detail {
    margin-top: 20px;

    p {
      margin: 10px 0;
    }

    button {
      margin-bottom: 20px;
      margin-top: 10px;
      background-color: #fff;
      border-color: rgba(127, 127, 198, 0.5);
    }
  }

  .label {
    position: absolute;
  }
}
</style>